<template>
	<div class="upload-image">
		<div class="preview" v-for="(item, index) in fileList" :key="index">
			<image :src="item.url" mode="aspectFill" class="image" @click="onPreview(index)"></image>
			<div class="delete" @click="onDelete(index)"></div>
		</div>
		<div class="preview upload" :class="{ disabled }" v-if="showUpload" @click="onUpload"></div>
	</div>
</template>

<script>
export default {
	name: "upload-image",
	props: {
		max: {
			type: [Number, String],
			default: -1,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		readOnly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			header: {
				Authorization: "Bearer " + uni.getStorageSync("token") || "",
			},
			fileList: [],
		}
	},
	computed: {
		showUpload() {
			if (this.readOnly) {
				return false
			}
			if (this.max == -1) {
				return true
			}
			return this.fileList.length < this.max
		},
	},
	methods: {
		formatFileList(value) {
			if (Array.isArray(value)) {
				return value.map(item => {
					if (typeof item === "string") {
						return {
							url: item,
							path: item,
							name: item,
						}
					}
					return item
				})
			}
			return []
		},
		onUpload() {
			if (this.disabled || !this.showUpload) {
				return
			}
			uni.chooseImage({
				count: this.max,
				success: ({ tempFilePaths }) => {
					if (this.max != -1) {
						tempFilePaths = tempFilePaths.slice(0, this.max - this.fileList.length)
					}

					tempFilePaths.forEach(filePath => {
						uni.uploadFile({
							url: this.path + "/api/system/oss/uploadFile",
							filePath,
							name: "file",
							header: this.header,
							success: res => {
								const { data } = res
								const {
									code,
									data: { url, path, name },
								} = JSON.parse(data)
								if (code === 0) {
									this.fileList = [...this.fileList, { url, path, name }]
								}
							},
						})
					})
				},
			})
		},
		onDelete(index) {
			uni.showModal({
				title: "提示",
				content: "确定删除该图片吗？",
				success: ({ confirm }) => {
					if (confirm) {
						const list = [...this.fileList]
						list.splice(index, 1)
						this.fileList = list
					}
				},
			})
		},
		onPreview(current) {
			uni.previewImage({
				urls: this.fileList.map(item => item.url),
				current,
				loop: true,
			})
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.upload-image {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	.preview {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		.image {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
		}
		.delete {
			position: absolute;
			top: 0;
			right: 0;
			width: 50rpx;
			height: 50rpx;
			background: rgb(255, 62, 62);
			border-radius: 50%;
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 20rpx;
				height: 2rpx;
				background: #ccc;
				transform: translate(-50%, -50%) rotate(45deg);
			}
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 20rpx;
				height: 2rpx;
				background: #ccc;
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}
		&.upload {
			background: #f4f5f7;
			border-radius: 15rpx;
			border: 1rpx dashed #ccc;
			position: relative;
			&::before,
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 40rpx;
				height: 2rpx;
				background: rgb(156, 156, 156);
				transform: translate(-50%, -50%);
			}
			&::after {
				transform: translate(-50%, -50%) rotate(90deg);
			}
			&.disabled {
				background: #f4f5f7;
				border: 1rpx dashed #ccc;
				&::before,
				&::after {
					background: #ccc;
				}
			}
		}
	}
}
</style>
